<template>
  <div>
    <div class="scroll-container">
      <div class="scroll-content" :style="{ 'animation-duration': jinChiData.length > 4 ? '10s' : '0s', }">
        <!-- 内容循环 -->
        <div v-for="i in (jinChiData.length > 4 ? 2:1)  ">
          <div v-for="(well, index) in jinChiData" :key="index">
            {{ well.wellName }}
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  onMounted,
  onUnmounted,
  reactive,
  ref
} from 'vue'
// 进尺数据
const jinChiData = ref([
  {"wellName": "五宝浅012"},
  {"wellName": "五宝浅011"},
  {"wellName": "五宝浅010"},
  {"wellName": "五宝浅009"},
  {"wellName": "五宝浅008"},
  {"wellName": "五宝浅006"},
  {"wellName": "五宝浅005"},
  {"wellName": "五宝浅004"},
  {"wellName": "五宝浅003"},
  {"wellName": "五宝浅002"},
  {"wellName": "五宝浅001"}
])

</script>

<style scoped>
.scroll-container {
  overflow: hidden;
  position: relative;
  height: 20vh; /* 根据需要设置高度 */
  width: 20vh; /* 根据需要设置高度 */
  margin: 10px;
  background-color: #0f1a32;
  color: #ffffff;
}

.scroll-content {
  position: absolute;
  white-space: nowrap;
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

@keyframes scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
</style>
